<template>
  <div
    class="row q-gutter-sm text-green-13 items-center"
    :class="needDialog ? 'cursor-pointer' : ''"
    @click="showDialog()"
  >
    <q-spinner-rings size="2rem" color="green-13" />
    <div class="text-bold text-center">{{ battery }}%</div>
  </div>
  <charging-dialog :battery="battery" ref="dialog" />
</template>

<script setup>
import ChargingDialog from "components/status/dialog/ChargingDialog.vue";
import { onMounted, ref } from "vue";

const props = defineProps({
  battery: { type: Number, default: -1 }, // 电量数值
  needDialog: { type: Boolean, default: false }, // 是否需要弹窗
});

const dialog = ref();

onMounted(() => {
  dialog.value.visible = props.needDialog;
});
function showDialog() {
  dialog.value.visible = props.needDialog;
}
</script>

<style scoped></style>
